<template>
  <div>
    <header>
      <p class="hep1" @click="fun()">&lt;</p>
      <p class="hep2">
        <span class="iconfont icon-sousuo"></span>
        <input type="text" name id placeholder="输入书名、作者关键词" />
      </p>
    </header>
    <p class="remen">热门发现</p>
    <main>
      <div>
        <p class="s1 active1">1</p>
        <p class="s2">偷偷藏不住</p>
      </div>
      <div>
        <p class="s1 active">2</p>
        <p class="s2">斗罗大陆</p>
      </div>
      <div>
        <p class="s1">3</p>
        <p class="s2">难哄</p>
      </div>
      <div>
        <p class="s1">4</p>
        <p class="s2">夫人你马甲掉了</p>
      </div>
      <div>
        <p class="s1">5</p>
        <p class="s2">白日梦我</p>
      </div>
      <div>
        <p class="s1">6</p>
        <p class="s2">向生</p>
      </div>
      <div>
        <p class="s1">7</p>
        <p class="s2">斗破苍穹</p>
      </div>
      <div>
        <p class="s1">8</p>
        <p class="s2">病态宠爱</p>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  methods:{
    fun(){
      this.$router.go(-1)
    }
  }
};
</script>

<style scoped>
header {
  height: 0.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f6f6f6;
  font-size: 0.14rem;
}
header .hep1 {
  width: 0.5rem;
  height: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
}
header .hep2 {
  height: 0.35rem;
  display: flex;
  width: 3.04rem;
  align-items: center;
  border-radius: 0.35rem;
  background: #f9f9f9;
  box-sizing: border-box;
  padding-left: 0.2rem;
}
header input {
  margin-left: 0.1rem;
  border: none;
  background: #f9f9f9;
}
.remen {
  height: 0.6rem;
  line-height: 0.6rem;
  box-sizing: border-box;
  padding-left: 0.2rem;
  font-weight: 700;
}
main {
  display: flex;
  flex-wrap: wrap;
}
main div {
  width: 45%;
  display: flex;
  height: 0.2rem;
  box-sizing: border-box;
  padding-left: 20px;
  margin-bottom: .2rem;
}
main .s1,.s2 {
  line-height: 0.2rem;
}
main div > p:nth-child(1).active{
  background: #ef8786;
}
main div > p:nth-child(1).active1{
  background: #eaa037;
}
main div p:nth-child(1) {
  background: #eaeaea;
  text-align: center;
  width: 0.2rem;
  margin-right: .3rem;
  color: white;
}

</style>